<template>
	<cl-crud>
		<zm-table :data="list" :columns="columns" :context-menu="[]" :auto-height="false">
			<template #column-projects="{ scope: { row } }">
				{{ row.projects }}
				<span v-if="Number(row.maintain)" class="tag ml-1">维护</span>
			</template>
			<template #column-status="{ scope: { row } }">
				<span v-if="!row.appeal">{{ row.status_text }}</span>
				<span v-else>{{ row.appeal == 1 ? "申诉中" : "已流失" }}</span>
			</template>
			<template #column-opt="{ scope: { row } }">
				<div v-if="!browser.isMobile">
				<template v-if="![2, 4, 6, 7].includes(row.status)">
					<el-button
						type="warning"
						v-auth="'store_cusdetailindex_gaiyue_time'"
						@click="modifyCartForm(row)"
					>
						改约
					</el-button>
					<el-button
						type="warning"
						v-auth="'store_cusdetailindex_gaiyue'"
						@click="editopenAppoint(row)"
					>
						修改预约信息
					</el-button>
					<el-button
						type="warning"
						v-auth="'store_cusdetailindex_gaiyue_dept'"
						@click="modifyDeptForm(row)"
					>
						修改来源部门
					</el-button>
				</template>
				<el-button type="warning" @click="appeal(row)" v-if="row.status == 7 && !row.appeal"
					>申诉</el-button
				>
				<el-button
					type="primary"
					@click="getDetail(row)"
					v-if="row.status == 7 || row.status == 6"
					>详情</el-button
				>
				<template
					v-if="$auth('store_vindicate_cancel') && (row.status == 6 || row.status == 7)"
				>
					<el-button type="danger" @click="withdraw(row)">撤回</el-button>
				</template>
				<template v-else-if="$auth('store_withdraw') && row.status == 6 && !row.appeal">
					<el-button type="danger" @click="withdraw(row)">撤回</el-button>
				</template>
				<!-- <el-button
					type="danger"
					v-auth="['store_withdraw', 'store_vindicate_cancel']"
					@click="withdraw(row)"
					v-if="row.status == 6 && !row.appeal"
					>撤回</el-button
				> -->
			</div>
			<div v-else>
					<el-dropdown class="ml-1" size="medium">
						<el-button> 更多<i class="el-icon-arrow-down el-icon--right" /> </el-button>

						<el-dropdown-menu slot="dropdown">
							<template v-if="![2, 4, 6, 7].includes(row.status)">
								<div>
									<el-dropdown-item
										><el-button
											type="warning"
											v-auth="'store_cusdetailindex_gaiyue_time'"
											@click="modifyCartForm(row)"
										>
											改约
										</el-button></el-dropdown-item
									>
									<el-dropdown-item>
										<el-button
											type="warning"
											v-auth="'store_cusdetailindex_gaiyue'"
											@click="editopenAppoint(row)"
										>
											修改预约信息
										</el-button>
									</el-dropdown-item>
									<el-dropdown-item>
										<el-button
											type="warning"
											@click="modifyDeptForm(row)"
											v-auth="'store_cusdetailindex_gaiyue_dept'"
										>
											修改来源部门
										</el-button>
									</el-dropdown-item>
								</div>
							</template>
							<el-dropdown-item v-if="row.status == 7 && !row.appeal">
								<el-button type="warning" @click="appeal(row)">申诉</el-button>
							</el-dropdown-item>
							<el-dropdown-item v-if="row.status == 7 || row.status == 6">
								<el-button type="primary" @click="getDetail(row)">详情</el-button>
							</el-dropdown-item>
							<el-dropdown-item
								v-if="
									$auth('store_vindicate_cancel') &&
										(row.status == 6 || row.status == 7)
								"
							>
								<el-button type="danger" @click="withdraw(row)">撤回</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</template>
			<cl-empty slot="empty" tips="暂无预约">
				<template #tips>
					<div v-if="$auth('store_cusdetailindex_yy') && !isInherit">
						该客户暂无预约,快给客户创建个预约吧！
						<br />
						<br />
						<el-button
							type="primary"
							:disabled="!!Number(detail.inherit_id)"
							@click="openAppoint(null)"
						>
							立即预约
						</el-button>
					</div>
					<div v-else>该客户暂无预约</div>
				</template>
			</cl-empty>
		</zm-table>
		<!-- 改约 -->
		<cl-appoint-form ref="form" :is-edit="!!list.length" @confirm="init" />
		<modify-cart-dept ref="modifyCartDept" @confirm="init"></modify-cart-dept>
		<modify-cart-time ref="modifyCartTime" @confirm="init"></modify-cart-time>

		<!-- 申诉弹框 -->
		<cl-dialog
			title="申诉"
			:visible.sync="accountsVisible"
			width="510px"
			:props="{ appendToBody: true }"
		>
			<el-form ref="form" :model="form" :rules="rules" label-position="top">
				<el-form-item label="申诉描述(图片非必传)" prop="appeal_detail">
					<el-input
						type="textarea"
						class="textarea-s"
						rows="6"
						v-model="form.appeal_detail"
					></el-input>
				</el-form-item>
				<cl-upload
					multiple
					:limit="5"
					:limit-size="5"
					list-type="picture-card"
					ref="uploads"
					v-model="form.appeal_images"
				/>
			</el-form>
			<template #footer>
				<el-button @click="accountsVisible = false">关闭</el-button>
				<el-button type="primary" @click="submit">确认</el-button>
			</template>
		</cl-dialog>
		<lose-info ref="loseinfo" />
	</cl-crud>
</template>
<script>
import LoseInfo from "./lose-info.vue";
import ModifyCartDept from "@/components/modify-cart/modify-dept";
import ModifyCartTime from "@/components/modify-cart/modify-time";
import { mapState, mapGetters } from "vuex";
export default {
	inject: ["parent"],
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	components: {
		LoseInfo,
		ModifyCartDept,
		ModifyCartTime
	},
	data() {
		return {
			list: [],
			columns: [
				{ label: "预约时间", prop: "appoint_date", width: 120 },
				{
					label: "预约门店",
					prop: "dept_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "预约项目",
					prop: "projects",
					minWidth: 200,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "事业部",
					prop: "biz_name",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "品牌",
					prop: "bra_name",
					minWidth: 150,
					align: "left"
				},
				{ label: "预约价格", minWidth: 120, formatter: row => `￥${row.total_price}` },
				{ label: "预约状态", prop: "status", minWidth: 120 },
				{ label: "操作", prop: "opt", width: 320, fixed: "right" }
			],
			accountsVisible: false,
			form: {
				cart_id: "",
				appeal_detail: "",
				appeal_images: ""
			},
			rules: {
				appeal_detail: [{ required: true, message: "请输入申诉描述" }]
			}
		};
	},
	computed: {
		...mapGetters(["browser"]),
		isInherit() {
			const { inherit_id } = this.detail;
			return !!Number(inherit_id);
		}
	},
	methods: {
		async init() {
			const { cus_id, biz_id } = this.detail;
			const { list } = await this.$service.cart.page({
				cus_id,
				biz_id,
				search_type: 7
			});
			if(this.browser.isMobile){
				this.columns[this.columns.length -1].width = 120
			}
			this.list = list;
		},
		// 打开预约
		openAppoint(data = null) {
			// this.$refs.form.open(data);
			this.$refs.form.open(data ?? this.detail);

			// this.parent.openAppoint(data);
		},
		//改约
		editopenAppoint(row) {
			this.openAppoint(row);
		},
		// 修改预约时间
		modifyCartForm(data) {
			this.$refs.modifyCartTime.open(data);
		},
		// 修改来源部门
		modifyDeptForm(data) {
			this.$refs.modifyCartDept.open(data);
		},
		appeal(row) {
			console.log(row);
			this.form.cart_id = row.cart_id;
			this.accountsVisible = true;
		},
		async getDetail(row) {
			const res = await this.$service.aftersale.getLost({
				cart_id: row.cart_id
			});
			this.$refs.loseinfo.open(res);
		},
		withdraw(row) {
			this.$confirm("此操作将撤回该流失？", "提示", {
				type: "warning"
			})
				.then(async () => {
					this.$service.aftersale.vindicatecancel({ cart_id: row.cart_id }).then(() => {
						row.status = 1;
					});
				})
				.catch(() => {});
		},
		submit() {
			this.$refs.form.validate(async valid => {
				if (!valid) return;
				this.form.appeal_images = this.form.appeal_images.split(",");
				await this.$service.cart.appeal(this.form);
				this.form = {
					cart_id: "",
					appeal_detail: "",
					appeal_images: []
				};
				this.accountsVisible = false;
				this.$message.success("操作成功");
				this.init();
			});
		}
	}
};
</script>
